<#include "/common/_page.ftl"/>
<@page>
<table id="datatable">   
     
</table>
<form id="toolbar" class="form-inline">
	<select style="width: 150px;">
		<#if queryattributes??>
		<#list queryattributes as item>
			<option value="${item.name}">${item.label}</option>
		</#list>
		</#if>
	</select>
	<span id="queryparams"></span>
	<button id="btnQuery" type="button" class="btn btn-primary btn-sm">查询</button>
	<button id="btnAdd" type="button" class="btn btn-success btn-sm">添加</button>
</form>
<div id="createDialog" class="easyui-dialog" data-options='title: "创建",width: 450,height: "auto",closed: true,cache: false,modal: true'></div>
<script>
function formatDatebox(value) {  
    var unixTimestamp = new Date(value);  
    return unixTimestamp.toLocaleString();
}
$(function(){
	$('#datatable').datagrid({
		pageList:[10,20,50,100],
		fit:true,title:'${datatitle}',
		fitColumns:true,
		toolbar:'#toolbar',singleSelect:true,rownumbers:true,pagination:true,
	    url:'${request.contextPath}/datalist/getData?type=${datatype}',    
	    columns:[[
	    	<#if attributes??>
	    	<#list attributes as item>
	    		<#if item.name=='create_date' || item.name=='modify_date'>
	    			{field:'${item.name}',title:'${item.label}',width:100,sortable:true,formatter: formatDatebox}<#sep>,   
	    		<#else>
	    			{field:'${item.name}',title:'${item.label}',width:100,sortable:true}<#sep>,   
	    		</#if>  
    		</#list>  
    		</#if>
	    ]]
	});
	var $select = $("#toolbar select").first();
	$select.combobox({
		buttonText:'＋',
		onClickButton:function(){
			var v = $(this).combobox("getValue");
			if($("#query_"+v).length<1){
				var inputLabel = $(this).combobox("getText");
				var $input = $("<span><input id='query_"+v+"' name='query."+v+"'/></span>");			
				$("#queryparams").append($input);
				$("#query_"+v).textbox({
					label:inputLabel+"：",
					labelAlign:'right',
					labelWidth:90,
					iconWidth:18,
					width:230,
					buttonText:'×',
					onClickButton:function(){$(this).parent().remove();}
				}); 
			}
		}
	});

	$("#btnAdd").on("click",function(){
		$('#createDialog').dialog('refresh', '${request.contextPath}/datalist/openCreatePage?type=${datatype}&dialog=createDialog&table=datatable');
		$('#createDialog').dialog('open'); 
	});

	$('#toolbar').form({
		url:'${request.contextPath}/datalist',
	    onSubmit: function(){    
	    	var queryParams = {}; 
	    	var pdata = $('#toolbar').serialize();	    	
	    	pdata = decodeURIComponent(pdata,true);
			if(pdata.length>0){				
		    	var strs = pdata.split("&");
		    	for (var i = 0; i < strs.length; i++) {
					var item = strs[i];
					var obj = item.split("=");
					delete queryParams[obj[0]];
					if(obj.length==2 && obj[1].length>0){
						queryParams[obj[0]]=obj[1];
					}
				}
	            $('#datatable').datagrid('options').queryParams=queryParams;
	            $("#datatable").datagrid('reload'); 
			}else{
				$('#datatable').datagrid('options').queryParams={};
				$("#datatable").datagrid('load'); 				
			}	    	  
	        return false;  
	    },    
	    success:function(data){}    
	});    

	$("#btnQuery").on("click",function(){
		$('#toolbar').submit();
	});
});
</script>
</@page>
